<template>
    <div class="tosub-view">
        <el-button class="back-btn" type="primary" @click="back" :icon="ArrowLeftBold" />
        <div class="body">
            <el-card class="box-card" v-if="!result.bool">
                <el-form ref="formRef" :model="dataForm" label-position="right" style="width: 460px;" label-width="120"
                    :rules="rules">
                    <el-form-item>
                        <h2 class="title">提交异常空气信息</h2>
                    </el-form-item>
                    <el-form-item label="描述异常信息" prop="feedback">
                        <el-input v-model="dataForm.feedback" type="textarea" />
                    </el-form-item>
                    <el-form-item label="污染等级预估" prop="level">
                        <el-select v-model="dataForm.level" placeholder="请选择" size="large">
                            <el-option :style="{ 'color': color[index] }" v-for="_, index in color" :key="index"
                                :label="`${index + 1}级`" :value="index" />
                        </el-select>
                        <div class="level" v-if="dataForm.level !== ''"
                            :style="{ 'backgroundColor': color[parseInt(dataForm.level)] }"></div>
                    </el-form-item>
                    <el-form-item label="选择你的城市" prop="city">
                        <div class="city-border">
                            <chooseCity @clear="dataForm.city = ''" @changeCity="changeCity" @changeProvince="changeProvince">
                            </chooseCity>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="sub-btn" @click="sub()">提交信息</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <div v-else>
                <el-result :icon="result.icon[result.index]" :title="result.title[result.index]"
                    :sub-title="result.subTitle[result.index]">
                    <template #extra>
                        <el-button type="primary" @click="back()">返回</el-button>
                    </template>
                </el-result>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject, reactive, ref } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()
const showWin: any = inject('showWin')
import {
    ArrowLeftBold
} from '@element-plus/icons-vue'
import { post } from '../../utils/index.ts'
import chooseCity from "../common/chooseCity.vue";
const Message = inject('$message') as any

const color = ['#02E300', '#FFFF00', '#FF7E00', '#FE0000', '#98004B', '#7E0123']

const result = reactive({
    bool: false,//是否提交?
    index: 0,
    icon: ['success', 'error'],
    title: ['提交成功!', '提交失败'],
    subTitle: ['请等待结果', '请重试'],
})
const formRef = ref(null)

const sub = async () => {
    let form = formRef as any
    form.value.validate((valid: boolean) => {
        // console.log(valid);
        if (!valid) {
            Message.info('表单不完整')
            return
        }
    })
    let data = {
        ...dataForm,
        reason: dataForm.feedback,
        estimateAqi: dataForm.level + 1,
        date: +new Date(),
        city: dataForm.city + '市'
    }
    let res = await post('/sys/referdate/save', data) as any
    if (res && res.code === 0) {
        Message.success('提交成功')
        result.bool = true
        result.index = 0
    } else {
        Message.success(`提交失败:${res.msg}`)
        result.bool = true
        result.index = 1
    }
}

const dataForm = reactive({
    city: '',
    feedback: '',
    level: '',
})
const rules = reactive({
    feedback: [{ required: true, message: '请填写异常信息', trigger: 'blur' }],
    city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
    level: [{ required: true, message: '请选择风险等级', trigger: 'blur' }]
})

// provide('city', city)
const back = () => {
    router.back()
    showWin.value = true
}
const changeCity = (e: any) => {
    // console.log(e.name, '1');
    dataForm.city = e.name
}
const changeProvince = (e: any) => {
    // console.log(e, '2');
    dataForm.city = e
}



</script>

<style scoped lang="scss">
.level {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 2px;
}

.tosub-view {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 80px;
    box-sizing: border-box;

    .back-btn {
        position: absolute;
        top: 15px;
        left: 15px;
    }

    .body {
        margin: 0 auto;
        background-color: #f2f3f5;
        width: 80%;
        // height: 100%;
        padding: 20px;
        border-radius: 20px;

        .box-card {
            display: flex;
            justify-content: center;

            .title {
                text-align: center;
                width: 100%;
                margin: 20px 0;
            }

            .city-border {
                height: 30px;
                padding: 0 10px;
                border: 1px solid #999;
                border-radius: 5px;
            }

            .sub-btn {
                margin: 0 auto;
            }
        }

    }
}
</style>